<template>

    <div>
        <div class="schart-box">
            <div class="content-title">柱状图</div>
            <schart class="schart" canvasId="bar" :options="options"></schart>
        </div>

    </div>
</template>

<script>
import Schart from 'vue-schart';
export default {
    components: {
        Schart
    },
    data() {
        return {
            loginRole: localStorage.getItem('loginRole'),
            foodDataTable:[],
            options: {
                type: 'bar',
                title: {
                    text: '所有店铺总成交额统计'
                },
                bgColor: '#fbfbfb',
                labels: [],
                datasets: [
                    {
                        label: '',
                        fillColor: 'deepskyblue',
                        data: []
                    }
                ]
            },

        };
    },

    created() {
        this.getDefaultFoodStatistics();
    },
    methods:{
        getDefaultFoodStatistics(){
            const _this = this;
            this.$http.get('dev-api/admin/order/amountBar')
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.foodDataTable = resp.data.data;
                        _this.getFoodXY();
                        _this.$message.success("获取数据成功")
                    }else {
                        _this.$message.error('获取数据失败')
                    }
                })

        },
        getFoodXY(){
            let dataX = [];
            let dataY = [];
            for (let i = 0; i < this.foodDataTable.length; i++) {
                dataX.push(this.foodDataTable[i].name);
                dataY.push(this.foodDataTable[i].amount);
            }
            this.options.labels = dataX;
            this.options.datasets[0].data = dataY;
        }
    }
};
</script>

<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 1000px;
    height: 500px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>